<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2020-03-14 10:13:00
 * @LastEditTime: 2020-03-014 10:13:00
 * @LastEditors: Please set LastEditors
 -->
<!--图片渲染组件，只虚入，传入一个图片数组-->
<template>
  <div class="imgView">
    <!--    <template v-for="(file, i) in followList[head.name]">-->
    <template v-for="(file, i) in imgFileList">
      <img  :key="i" :class="direction === 'horizontal'?'picture':'full-width'"  :src="file" @click="handleImgsClick(imgFileList, i)" v-if="file.length>0">
    </template>
  </div>
</template>

<script>
import {imgView} from '../common/js/mixins'
export default {
  mixins: [imgView],
  name: 'imgArea',
  props: {
    imgFileList: {
      type: Array | String,
      default: () => []
    },
    direction: {
      type: String,
      default: 'horizontal'
    }
  },
  mounted () {
    // console.log(this.imgFileList)
  },
  methods: {
  }
}
</script>

<style scoped lang="stylus">
@import "../../node_modules/stylus-px2rem"
  .imgView{
    display:flex;
    flex-wrap: wrap;
    justify-content flex-start
    img
    {
      width 100%
      height 100%
    }
    .picture
    {
      width: 48px
      height: 48px
      margin 1.1px 1.1px
    }
  }
</style>
